<template>
  <view class="content">
    <view class="topBox">
      <view class="setbox">
        <view class="set-left">
          <!-- <uni-icons type="calendar" size="30" color="#fff"></uni-icons> -->
          <!-- <view class="txt">签到</view> -->
        </view>
        <view class="set-right">
          <uni-icons type="trash" size="30" color="#fff" @click="onClick"></uni-icons>
          <!-- <uni-icons type="chat" size="30" color="#fff"></uni-icons> -->
        </view>
      </view>

      <view class="users">
        <view class="u-top">
          <image
            :src="imageUrl+friendDetail.friendPortrait"
            mode=""></image>
          <view class="tit">
            {{friendDetail.friendNickName}}
          </view>
        </view>
	
        <view class="u-bottom">
          <view class="u-item">
            <view class="u-tit"> {{friendDetail.friendNickName}}</view>
          </view>
		  <view class="u-item">
		    <view class="u-tit">笔记数量 2 </view>
		  </view>
        </view>
      </view>
    </view>



    <view class="listBox">
      <view class="lists">
        
		<uni-card   v-for="item in friendNoteList">
			<!-- <image slot='cover' style="width: 100%;" :src="cover"></image> -->
			
			<rich-text :nodes="item.context"></rich-text>
			<view style="border-top: 1px #eee solid;">
				<uni-icons type="fire" size="18" color="#999" v-if="item.topFlag==1"></uni-icons>
				<text >{{item.showTime}}</text>
			</view>
			
		<!-- 	<view slot="actions" class="card-actions">
				<view class="card-actions-item" @click="actionsClick('分享')">
					<uni-icons type="pengyouquan" size="18" color="#999"></uni-icons>
					<text class="card-actions-item-text">分享</text>
				</view>
				<view class="card-actions-item" @click="actionsClick('点赞')">
					<uni-icons type="heart" size="18" color="#999"></uni-icons>
					<text class="card-actions-item-text">点赞</text>
				</view>
				<view class="card-actions-item" @click="actionsClick('评论')">
					<uni-icons type="chatbubble" size="18" color="#999"></uni-icons>
					<text class="card-actions-item-text">评论</text>
				</view>
			</view> -->
		</uni-card>
		
					
	<!-- 	
		<uni-fab ref="fab" :pattern="pattern" :content="toolsContent" :horizontal="horizontal" :vertical="vertical"
					:direction="direction" @trigger="trigger" /> -->
      </view>
    </view>

	
  </view>
</template>

<script>
import constant from '@/store/constant.js'
	
	const baseImageUrl=constant.baseImageUrl;
	import store from '@/store/index.js';//需要引入store
	export default {
			computed:{
				friendDetail(){
					return store.state.friend.friendDetail
				},
				friendNoteList(){
					return store.state.friend.friendNoteList
				},
				toolsContent(){
					return store.state.common.toolsContent
				},
			},
			components: {},
			onLoad(option) {
				
				option.friendId
					
				
				//加载新闻通知数据
				store.dispatch('loadFriendDetail',{"friendId":option.friendId})
				store.dispatch('loadfriendNoteData',{"userId":option.friendId})
				
				
				
				
			},
			data() {
				return {
					imageUrl:baseImageUrl,
					cover: '../../static/bb.png',
				avatar: '../../static/pig.png',
					extraIcon:{
						color: '#4cd964',
						size: '22',
						type: 'gear-filled'
					},
					title: 'uni-fab',
					directionStr: '垂直',
					horizontal: 'right',
					vertical: 'bottom',
					direction: 'horizontal',
					pattern: {
						color: '#7A7E83',
						backgroundColor: '#fff',
						selectedColor: '#007AFF',
						buttonColor: '#007AFF',
						iconColor: '#fff'
					},
					is_color_type: false,
					
				}
			},
			methods: {
				trigger(e) {
					this.toolsContent[e.index].active = !e.item.active
					store.dispatch('toolsJump',e.item.value)
				},
				onClick(e){
					console.log(e)
				},
				actionsClick(text){
					uni.showToast({
						title:text,
						icon:'none'
					})
				}
			}
		}
</script>

<style scoped>
  .content {
    background-color: #f5f5f5;
    height: 100vh;
  }

  /* 弧形背景 */
  .topBox {
    width: 100%;
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding: 60rpx 20rpx 20rpx;
    box-sizing: border-box;
  }

  .topBox::after {
    content: "";
    width: 140%;
    height: 200px;
    position: absolute;
    left: -20%;
    top: 0;
    z-index: -1;
    border-radius: 0 0 50% 50%;
    background: #00aaff;
  }

  /* 弧形背景 */
  
  .setbox {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .set-left {
    width: 18%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .txt {
    color: #fff;
    font-size: 30rpx;
  }

  .set-right .uni-icons {
    margin-right: 10rpx;
  }

  .users {
    margin-top: 20rpx;
    padding: 30rpx;
    box-sizing: border-box;
    height: 280rpx;
    background-color: #fff;
    box-shadow: 1px 10rpx 20rpx #ececec;
    border-radius: 12rpx;
  }

  .u-top {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 30rpx;
  }

  .users .u-top image {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    margin-right: 20rpx;
  }

  .u-top .tit {
    font-size: 30rpx;
    font-weight: 700;
    color: #333;
  }

  .u-bottom {
    /* display: flex; */
    justify-content: space-around;
    align-items: left;
  }

  .u-item {
    text-align: left;
  }

  .u-item .u-tit {
    color: #757575;
    font-size: 26rpx;
    margin-top: 10rpx;
  }

  .u-item .num {
    color: #000000;
    font-size: 33rpx;
    font-weight: 700;
  }

  .bottomBox {
    padding: 20rpx;
    box-sizing: border-box;
  }

  .order-list {
    height: 200rpx;
    margin: -15rpx auto 0;
    padding: 30rpx;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 12rpx;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .o-item {
    width: 25%;
    text-align: center;
  }

  .o-item image {
    width: 65rpx;
    height: 55rpx;
  }

  .o-item .tit {
    font-size: 28rpx;
    margin-top: 10rpx;
  }

  .listBox {
    height: 200rpx;
    margin: -10rpx auto 0;
    padding: 20rpx;
    box-sizing: border-box;
    border-radius: 12rpx;
  }
</style>